<template>
    <div id="ToolBar">
        <v-bottom-navigation v-model="bottomNav"
                             dark
                             shift>
            <TabBarItem name="主页" path="/home" icon="mdi-television-play"></TabBarItem>
            <TabBarItem name="音乐" path="/music" icon="mdi-music-note"></TabBarItem>
            <TabBarItem name="书签" path="/bookmarks" icon="mdi-book"></TabBarItem>
            <TabBarItem path="/mind" name="我的" icon="mdi-image"></TabBarItem>
        </v-bottom-navigation>
    </div>

</template>

<script>
    import TabBarItem from "@/components/tabbar/TabBarItem";

    export default {
        name: "TabBar",
        data() {
            return {
                bottomNav: 3,
            }
        },
        computed: {
            color() {
                switch (this.bottomNav) {
                    case 0:
                        return 'blue-grey'
                    case 1:
                        return 'teal'
                    case 2:
                        return 'brown'
                    case 3:
                        return 'indigo'
                }
            },
        },
        components: {
            TabBarItem,
        }
    }
</script>

<style scoped>
    #ToolBar {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 60px;
        background-color: #000;
        z-index: 9999;
    }
</style>